<template>
  <CustomDialog
    :options="options"
    @open="open"
    @close="close"
    @beforeClose="beforeClose"
    @confirm="handleConfirm"
  >
    <div class="wrapper">{{ options.text }}</div>
  </CustomDialog>
</template>

<script>
  import CustomDialog from '@/components/CustomDialog/index.vue';
  export default {
    components: {
      CustomDialog,
    },
    props: {
      options: {
        type: Object,
        required: true,
        default: () => {
          return {
            width: 648,
            title: '',
            visible: false,
            text: '',
          };
        },
      },
      submitCallback: {
        type: Function, // 确认事件
      },
      cancelCallback: {
        type: Function, // 取消事件
      },
    },

    data() {
      return {};
    },
    methods: {
      open() {},
      close() {
        console.log('this', this);
        // this.$forceUpdate();
      },
      beforeClose() {
        this.cancelCallback();
      },
      async handleConfirm() {
        this.submitCallback();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .wrapper {
    display: flex;
    background: #f8f9f9;
  }
</style>
